<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	
	<link rel="stylesheet" href="css/global.css">
	
	<script src="js/jquery.min.js"></script>
	<script src="js/slides.min.jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 7500,
				pause: 2500,
				hoverPause: false,
				animationStart: function(current){
					$('.caption').animate({
						bottom:-35
					},100);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationStart on slide: ', current);
					};
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationComplete on slide: ', current);
					};
				},
				slidesLoaded: function() {
					$('.caption').animate({
						bottom:0
					},200);
				}
			});
		});
	</script>
    <style type="text/css">
		.slides_container div.slide { height:310px; }
	</style>
</head id="ing">
<body>
	<div id="container">
		<div id="example">
		  <div id="slides">
		  <div class="slides_container">
					<div class="slide">
						<img src="img/servicios-slide-1.jpg" width="718" height="310" alt="Slide 1">
						<div class="caption" style="bottom:0">
							<p>Sawa Café & Restaurant</p>
						</div>
					</div>
					<div class="slide">
						<img src="img/servicios-slide-2.jpg" width="718" height="310" alt="Slide 2">
						<div class="caption">
							<p>Meeting room</p>
						</div>
					</div>
					<div class="slide">
						<img src="img/servicios-slide-3.jpg" width="718" height="310" alt="Slide 3">
						<div class="caption">
							<p>Lounge</p>
						</div>
					</div>
					<div class="slide">
						<img src="img/servicios-slide-4.jpg" width="718" height="310" alt="Slide 4">
						<div class="caption">
							<p>Tourist information</p>
						</div>
					</div>
					<div class="slide">
						<img src="img/servicios-slide-5.jpg" width="718" height="310" alt="Slide 5">
						<div class="caption">
							<p>Permanent security</p>
						</div>
					</div>
					<div class="slide">
						<img src="img/servicios-slide-6.jpg" width="718" height="310" alt="Slide 6">
						<div class="caption">
							<p>Infrastructure</p>
						</div>
					</div>
                    <div class="slide">
						<img src="img/servicios-slide-7.jpg" width="718" height="310" alt="Slide 7">
						<div class="caption">
							<p>Diverse Areas</p>
						</div>
					</div>
					
					
				</div>
			
			</div>
			
		</div>
		
</div>
</body>
</html>
